<template>
  <div class="mod-menu">
    <el-form :inline="true" >
      <el-form-item>
        <el-button type="primary" @click="showAdd()">新增</el-button>
      </el-form-item>
    </el-form>
    <template>
      <el-table
        :data="dataList"
        row-key="menuId"
        border
        style="width: 100%;"
      >
        <el-table-column
          prop="goodsId"
          header-align="center"
          align="center"
          label="ID" >
        </el-table-column>
        <el-table-column
          prop="goodsName"
          header-align="center"
          align="center"
          label="商品名" >
        </el-table-column>
        <el-table-column
          prop="goodsNum"
          header-align="center"
          align="center"
          label="商品數量">
        </el-table-column>
        <el-table-column
          prop="goodsPrice"
          header-align="center"
          align="center"
          label="商品单价">
        </el-table-column>
        <el-table-column
          prop="goodsType"
          :formatter="findGoodType"
          header-align="center"
          align="center"
          label="类型">
        </el-table-column>
        <el-table-column
          prop="goodsClazz"
          header-align="center"
          align="center"
          label="商品总称">
        </el-table-column>
        <el-table-column
          prop="goodsSalePlace"
          header-align="center"
          align="center"
          label="销售地址">
        </el-table-column>
        <el-table-column
          prop="goodsProPlace"
          header-align="center"
          align="center"
          label="采购地址">
        </el-table-column>
        <el-table-column
          prop="goodsStatus"
          :formatter="findGoodsStatus"
          header-align="center"
          align="center"
          label="货物状态">
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="200"
          label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="showPic(scope.row)">查看图片</el-button>
            <el-button type="text" size="small" @click="showedit(scope.row)">修改</el-button>
            <el-button type="text" size="small" @click="deleteHandle(scope.row.goodsId)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </template>

    <el-dialog title="新增商品" width="40%" :visible="addVisible" :before-close="handleClose">
      <el-form :model="addGoodsMsg" label-width="80px" ref="dateForm" :rules="addRules" class="demo-ruleForm">
        <el-form-item label="名称" prop="goodsName">
          <el-input v-model="addGoodsMsg.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="goodsType">
          <el-select v-model="addGoodsMsg.goodsType">
            <el-option
              v-for="item in goodsTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="goodsNum">
          <el-input-number v-model="addGoodsMsg.goodsNum"></el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="goodsPrice">
          <el-input-number v-model="addGoodsMsg.goodsPrice"  :step="0.1" :precision="2" ></el-input-number>
        </el-form-item>
        <el-form-item label="类别总称" prop="goodsClazz">
          <el-input v-model="addGoodsMsg.goodsClazz"></el-input>
        </el-form-item>
        <el-form-item label="采购地址" prop="goodsProPlace">
          <el-input v-model="addGoodsMsg.goodsProPlace"></el-input>
        </el-form-item>
        <el-form-item label="销售地址" prop="goodsSalePlace">
          <el-input v-model="addGoodsMsg.goodsSalePlace"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="goodsContent">
          <el-input v-model="addGoodsMsg.goodsContent" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :action=url
            :limit=3
            :on-remove="onRemove"
            :headers= token
            :on-success="uploadFile"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addSave()">立即创建</el-button>
          <el-button @click="addVisible =false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="查看图片" width="700px" :visible="picVisible" height="300px" :before-close="handleClose" >
      <div class="demo-image" style="display: flex;">
        <div v-for="item in tempPicList" :key="item" class="block">
            <img
              style="width: 200px; height: 200px; float: left"
              :src="item"
            />
          </div>
      </div>
    </el-dialog>
    <el-dialog title="修改商品" width="40%" :visible="editVisible" :before-close="handleClose">
      <el-form :model="editGoodsMsg" label-width="80px" ref="editDateForm" :rules="editRules" class="demo-ruleForm">
        <el-form-item label="名称" prop="goodsName">
          <el-input v-model="editGoodsMsg.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="goodsType">
          <el-select v-model="editGoodsMsg.goodsType">
            <el-option
              v-for="item in goodsTypes"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量" prop="goodsNum">
          <el-input-number v-model="editGoodsMsg.goodsNum"></el-input-number>
        </el-form-item>
        <el-form-item label="单价" prop="goodsPrice">
          <el-input-number v-model="editGoodsMsg.goodsPrice"  :step="0.1" :precision="2" ></el-input-number>
        </el-form-item>
        <el-form-item label="类别总称" prop="goodsClazz">
          <el-input v-model="editGoodsMsg.goodsClazz"></el-input>
        </el-form-item>
        <el-form-item label="采购地址" prop="goodsProPlace">
          <el-input v-model="editGoodsMsg.goodsProPlace"></el-input>
        </el-form-item>
        <el-form-item label="销售地址" prop="goodsSalePlace">
          <el-input v-model="editGoodsMsg.goodsSalePlace"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="goodsContent">
          <el-input v-model="editGoodsMsg.goodsContent" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-upload
            :action=url
            :limit=3
            :on-remove="onRemove"
            :headers= token
            :on-success="uploadFile"
            list-type="picture-card"
          >
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{file}">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url" alt=""
              >
              <span class="el-upload-list__item-actions">
        <span
          class="el-upload-list__item-preview"
          @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
          v-if="!disabled"
          class="el-upload-list__item-delete"
          @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="updateMsg('editGoodsMsg')">修改</el-button>
          <el-button @click="editVisible =false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  data () {
    return {
      dataList: [],
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      searchItem: {

      },
      addVisible: false,
      editVisible: false,
      picVisible: false,
      dialogVisible: false,
      dataListSelections: [],
      url: 'http://47.100.60.48:17000/renren-fast/goods_pic/uploadPic',
      disabled: false,
      picList: [],
      tempPicList: [],
      token: {token: Vue.cookie.get('token')},
      dialogImageUrl: '',
      goodsPic: '',
      images: [],
      goodsTypes: [
        {
          label: '无分类',
          value: 0
        },
        {
          label: '重磅新品',
          value: 1
        },
        {
          label: '热门推荐',
          value: 2
        },
        {
          label: '猜你喜欢',
          value: 3
        },
        {
          label: '必买商品',
          value: 4
        },
        {
          label: '轮播商品',
          value: 5
        }
      ],

      addGoodsMsg: {
        goodsId: '',
        goodsNum: 1,
        goodsName: '',
        goodsType: '0',
        goodsPrice: 0,
        goodsContent: '',
        goodsClazz: '',
        goodsProPlace: '',
        goodsSalePlace: '',
        goodsStatus: 0
      },
      addRules: {
        goodsNum: [
          {required: true, message: '请输入数量', trigger: 'blur'}
        ],
        goodsName: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        goodsContent: [
          {required: true, message: '请输入描述', trigger: 'blur'}
        ],
        goodsClazz: [
          {required: true, message: '请输入类别总称', trigger: 'blur'}
        ],
        goodsProPlace: [
          {required: true, message: '请输入采购地址', trigger: 'blur'}
        ],
        goodsSalePlace: [
          {required: true, message: '请输入销售地址', trigger: 'blur'}
        ],
        goodsType: [
          {required: true, message: '请选择类型', trigger: 'change'}
        ]
      },
      editGoodsMsg: {
        goodsId: '',
        goodsNum: 1,
        goodsName: '',
        goodsType: '0',
        goodsPrice: 0,
        goodsContent: '',
        goodsClazz: '',
        goodsProPlace: '',
        goodsSalePlace: '',
        goodsStatus: 0
      },
      editRules: {
        goodsNum: [
          {required: true, message: '请输入数量', trigger: 'blur'}
        ],
        goodsName: [
          {required: true, message: '请输入名称', trigger: 'blur'}
        ],
        goodsContent: [
          {required: true, message: '请输入描述', trigger: 'blur'}
        ],
        goodsClazz: [
          {required: true, message: '请输入类别总称', trigger: 'blur'}
        ],
        goodsProPlace: [
          {required: true, message: '请输入采购地址', trigger: 'blur'}
        ],
        goodsSalePlace: [
          {required: true, message: '请输入销售地址', trigger: 'blur'}
        ],
        goodsType: [
          {required: true, message: '请选择类型', trigger: 'change'}
        ]
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    showAdd () {
      this.addGoodsMsg.goodsId = ''
      this.addGoodsMsg.goodsNum = 1
      this.addGoodsMsg.goodsName = ''
      this.addGoodsMsg.goodsType = '0'
      this.addGoodsMsg.goodsPrice = 0
      this.addGoodsMsg.goodsContent = ''
      this.addGoodsMsg.goodsClazz = ''
      this.addGoodsMsg.goodsProPlace = ''
      this.addGoodsMsg.goodsSalePlace = ''
      this.addGoodsMsg.goodsStatus = 0
      this.dialogImageUrl = ''
      this.addVisible = true
    },
    showedit (row) {
      this.editGoodsMsg = row
      this.editVisible = true
    },
    uploadFile (response, file, fileList) {
      this.picList = [] // 重置数据
      if (fileList !== null && fileList.length > 0) {
        for (let i = 0; i < fileList.length; i++) {
          for (let j = 0; j < fileList[i].response.list.length; j++) {
            this.picList.push(fileList[i].response.list[j])
          }
        }
      }
    },
    onRemove (file, fileList) {
      this.picList = []
      if (fileList !== null && fileList.length > 0) {
        for (let i = 0; i < fileList.length; i++) {
          for (let j = 0; j < fileList[i].response.list.length; j++) {
            this.picList.push(fileList[i].response.list[j])
          }
        }
      }
    },
    getList () {
      this.searchItem = {
      }
      this.$http({
        url: this.$http.adornUrl('/goods_msg/page?page=' + this.pageIndex + '&size=' + this.pageSize),
        method: 'post',
        data: this.$http.adornData(this.searchItem)
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list
          this.totalPage = data.page.totalCount
        } else {
          this.dataList = []
          this.totalPage = 0
        }
      })
    },
    addSave () {
      console.log(this.addGoodsMsg)
      console.log(this.picList)
      this.$refs['dateForm'].validate((valid) => {
        if (valid) {
          if (this.picList.length === 3) {
            this.$http({
              url: this.$http.adornUrl('/goods_pic/uploadMultipleFile?files=' + this.picList.toString()),
              method: 'post',
              data: this.$http.adornData(this.addGoodsMsg)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                  }
                })
              }
              this.getList()
              this.addVisible = false
            })
          } else {
            this.$message.error('需要三张图片')
          }
        }
      })
    },
    updateMsg () {
      console.log(this.editGoodsMsg)
      console.log(this.picList)
      this.$refs['editDateForm'].validate((valid) => {
        if (valid) {
          if (this.picList.length === 3 || this.editGoodsMsg.goodsId !== '') {
            this.$http({
              url: this.$http.adornUrl('/goods_pic/updateMsg?files=' + this.picList.toString()),
              method: 'post',
              data: this.$http.adornData(this.editGoodsMsg)
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                  }
                })
              }
              this.getList()
              this.editVisible = false
            })
          } else {
            this.$message.error('需要三张图片')
          }
        }
      })
    },
    deleteHandle (id) {
      console.log(id)
      var ids = id ? [id] : this.dataListSelections.map(item => {
        return item.jobId
      })
      this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/goods_msg/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.$message({
              message: '操作成功',
              type: 'success',
              duration: 1500,
              onClose: () => {
                this.getList()
              }
            })
          } else {
            this.$message.error(data.msg)
          }
        })
      }).catch(() => {})
    },
    showPic (row) {
      console.log(row)
      if (row.picPosition !== null && row.picPosition.length > 0) {
        this.picVisible = true
        this.tempPicList = row.picPosition
      }
    },
    sizeChangeHandle (val) {
      this.pageSize = val
      this.pageIndex = 1
      this.getList()
    },
    // 当前页
    currentChangeHandle (val) {
      this.pageIndex = val
      this.getList()
    },
    findGoodType (row) {
      for (let i = 0; i < this.goodsTypes.length; i++) {
        if (row.goodsType === this.goodsTypes[i].value) {
          return this.goodsTypes[i].label
        }
      }
    },
    findGoodsStatus (row) {
      return row.goodsStatus === 0 ? '有货' : '无货'
    },
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleDownload (file) {
      console.log(file)
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.addVisible = false
          this.picVisible = false
          this.editVisible = false
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>

</style>
